<template>
  <div class="h-100">
      <el-page-header
        @back="goBack"
        :content="this.$store.state.titleName"
        class="f-16 p-20"
      ></el-page-header>

      <div class="p-50 p-t-20 h-100 o-y-auto">


 <div class="f j-e">
    <el-button type="primary" @click="openDiang({},'add','2')">新增分类</el-button>
    </div>

      <el-table
    :data="tableData"
    type="index"
    style="width: 100%"
    v-loading="loading"
    class="m-t-20">
    <el-table-column
      label="二级栏目">
      <template slot-scope="scope">
        <el-button size="small" @click="openDiang(scope.row,'edit','2')">{{ scope.row.lableName }}<i class="el-icon-edit m-l-10"></i></el-button>
      </template>
    </el-table-column>
    <el-table-column
      label="序号">
      <template slot-scope="scope">
        <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.ordNmber }}</el-tag>
          </div>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="primary"
          plain
          @click="delectTwoColumn(scope.row.id)">删除栏目</el-button>
          <el-button
          size="mini"
          type="primary"
          plain
          @click="toeditCont(scope.row.id)">文章 [{{scope.row.count}}]</el-button>
      </template>
    </el-table-column>
  </el-table>

     
  </div>


  <!-- 新增/编辑 -->
  <el-dialog :title="dData.dTitle" :visible.sync="dData.dShow" width="30%" center>
    <el-input v-model="dData.dValue1" placeholder="请输入标题"></el-input>
    <el-input class="m-t-5" v-model="dData.dValue2" placeholder="请输入序号"></el-input>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="addEditColumn">确 定</el-button>
      <el-button @click="dData.dShow = false">取 消</el-button>
    </span>
  </el-dialog>



  </div>
</template>
<script>
import {
  addTwoColumn,
  queryTwoColumn,
  delectTwoColumn,
  editTwoColumn
} from "../http/api";
export default {
  name: "editList2",
  data() {
    return {
      // 新增/编辑菜单
      dData: {
        dShow: false,
        dTitle: "提示",
        dValue1: "",
        dValue2: "",
        level: "2",
        type: "add",
        id: ""
      },
      loading: true,
      tableData: []
    };
  },

  created() {
    this.queryTwoColumn();
  },
  mounted() {},
  methods: {
    // 查询栏目
    queryTwoColumn() {
      const data = {
        pId: this.$store.state.navId
      };
      queryTwoColumn(data).then(res => {
        console.log({ 查询栏目: res });
        if (res.data.length > 0) {
          this.tableData = res.data;
        }
        this.loading = false;
      });
    },

    // 打开弹窗
    openDiang(item, type, level) {
      if (type == "add") {
        this.dData.dTitle = "新增栏目";
        this.dData.dValue1 = "";
        this.dData.dValue2 = "0";
      }
      if (type == "edit") {
        this.dData.dTitle = "修改栏目";
        this.dData.dValue1 = item.lableName;
        this.dData.dValue2 = item.ordNmber;
      }
      this.dData.level = level;
      this.dData.type = type;
      this.dData.id = item.id;
      this.dData.dShow = true;
    },

    // 添加编辑栏目
    addEditColumn() {
      if (this.dData.dValue1 == "") {
        this.$message("请输入标题名称");
        return false;
      }
      if (this.dData.dValue2 == "") {
        this.$message("请输入排序号");
        return false;
      }
      const data = {
        pId: this.$store.state.navId,
        lableName: this.dData.dValue1,
        level: this.dData.level,
        ordNmber: this.dData.dValue2
      };

      if (this.dData.type == "add") {
        addTwoColumn(data).then(res => {
          console.log({ 添加栏目: res });
          this.dData.dShow = false;
          this.queryTwoColumn();
        });
      }
      if (this.dData.type == "edit") {
        const data = {
          id: this.dData.id,
          lableName: this.dData.dValue1,
          ordNmber: this.dData.dValue2
        };
        editTwoColumn(data).then(res => {
          console.log({ 修改栏目: res });
          this.dData.dShow = false;
          this.queryTwoColumn();
        });
      }
    },
    // 删除栏目
    delectTwoColumn(id) {
      const data = {
        id: id
      };
      delectTwoColumn(data).then(res => {
        console.log({ 删除栏目: res });
        this.queryTwoColumn();
      });
    },

    // 编辑详情
    toeditCont(id, count) {
      this.$store.commit("columnId", id);
      this.$router.push({
        path: "../page/editList2_1"
      });
    },
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

